<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link th:href="@{/bootsrap/bootstrap.css}" rel="stylesheet">
    <link th:href="@{/css/mystyle.css}" rel="stylesheet">
    <script th:src="@{/jquery/jquery-1.11.3.min.js}"></script>
    <script th:src="@{/jquery/bootstrap.min.js}"></script>
    <link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div th:replace="~{commons/bar::topbar(activeUri='admin')}"></div>

<div>
    <!--<h1 style="color: #2e6da4">视频展示</h1>-->
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend><h1 style="color: #2e6da4">视频展示</h1></legend>
    </fieldset>
    <hr style="height: 5px;background-color:pink"/>

    <div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
        <button class="layui-btn" data-method="notice">示范一个公告层</button>
        <button class="layui-btn" data-method="notice">示范一个公告层</button>
    </div>
    <table class="layui-table" lay-skin="row" lay-even="">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>人物</th>
            <th>民族</th>
            <th>出场时间</th>
            <th>格言</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>贤心</td>
            <td>汉族</td>
            <td>1989-10-14</td>
            <td>人生似修行</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>张爱玲</td>
            <td>汉族</td>
            <td>1920-09-30</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>Helen Keller</td>
            <td>拉丁美裔</td>
            <td>1880-06-27</td>
            <td> Life is either a daring adventure or nothing.</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>岳飞</td>
            <td>汉族</td>
            <td>1103-北宋崇宁二年</td>
            <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>孟子</td>
            <td>华夏族（汉族）</td>
            <td>公元前-372年</td>
            <td>猿强，则国强。国强，则猿更强！ </td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>贤心</td>
            <td>汉族</td>
            <td>1989-10-14</td>
            <td>人生似修行</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>张爱玲</td>
            <td>汉族</td>
            <td>1920-09-30</td>
            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>Helen Keller</td>
            <td>拉丁美裔</td>
            <td>1880-06-27</td>
            <td> Life is either a daring adventure or nothing.</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>岳飞</td>
            <td>汉族</td>
            <td>1103-北宋崇宁二年</td>
            <td>教科书再滥改，也抹不去“民族英雄”的事实</td>
            <td>
                <a  class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a  class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        <tr>
            <td>孟子</td>
            <td>华夏族（汉族）</td>
            <td>公元前-372年</td>
            <td>猿强，则国强。国强，则猿更强！ </td>
            <td>
                <a class="layui-btn layui-btn-xs" lay-event="edit" data-type="auto" data-method="offset">编辑</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-type="auto" data-method="offset">删除</a>
            </td>
        </tr>
        </tbody>
    </table>
</div>
<script src="/layui/layui.all.js"></script>

<script>
    layui.use('layer', function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            notice: function(){
                //示范一个公告层
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: '300px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['火速围观', '残忍拒绝']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br>layer ≠ layui<br><br>layer只是作为Layui的一个弹层模块，由于其用户基数较大，所以常常会有人以为layui是layerui<br><br>layer虽然已被 Layui 收编为内置的弹层模块，但仍然会作为一个独立组件全力维护、升级。<br><br>我们此后的征途是星辰大海 ^_^</div>'
                    ,success: function(layero){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/'
                            ,target: '_blank'
                        });
                    }
                });
            }
            ,offset: function(othis){
                var type = othis.data('type')
                    ,text = othis.text();

                layer.open({
                    type: 1
                    ,offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                    ,id: 'layerDemo'+type //防止重复弹出
                    ,content: '<div style="padding: 20px 100px;">'+ 'hjkhjkhhjbhjbhj' +'</div>'
                    ,btn: '关闭全部'
                    ,btnAlign: 'c' //按钮居中
                    ,shade: 0 //不显示遮罩
                    ,yes: function(){
                        layer.closeAll();
                    }
                });
            }
        };

        $('* .layui-btn').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });
</script>

</body>
</html>